.container {
  display: flex;
  /*换行*/
  flex-wrap: wrap;
  width: 98%;
  background-image: url("../images/大bingjing.png");
  background-repeat: no-repeat;
  background-position: center center;
  // background-size: contain;
  cursor: pointer;
  margin: 0 auto;
}

.item1 {
  position: relative;
  box-sizing: border-box;
  width: calc(calc(100% / 3) - 10px);
  height: 300px;
  margin: 5px;
  border: 1px dashed #ccc;

  .itemCard {
    position: absolute;
    width: 70px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }

  .triangle {
    position: absolute;
    top: 90px;
    left: 95px;
    width: 20px;
    height: 20px;
    background-image: url("../images/双箭头-向右.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }

  .triangle1 {
    top: 70px;
    left: 75px;
  }

  .triangle2 {
    top: 55px;
    left: 165px;
  }

  .triangle3 {
    top: 44px;
    left: 254px;
  }

  .triangle4 {
    top: 55px;
    left: 347px;
  }
  .triangle5 {
    top: 70px;
    left: 444px;
  }

  .itemCardBg1 {
    top: 60px;
    left: 5px;
    background-image: url(../images/智能检测.png);
  }

  .itemCardBg2 {
    top: 42px;
    left: 94px;
    background-image: url(../images/虚假剔除.png);
  }

  .itemCardBg3 {
    top: 25px;
    left: 183px;
    background-image: url(../images/关联处理.png);
  }

  .itemCardBg4 {
    top: 25px;
    left: 275px;
    background-image: url(../images/修正处理.png);
  }

  .itemCardBg5 {
    top: 42px;
    left: 372px;
    background-image: url(../images/辅助识别.png);
  }
  .itemCardBg6 {
    top: 60px;
    left: 464px;
    background-image: url(../images/测评评估.png);
  }

  .dataBg {
    position: absolute;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    height: 80px;
    color: #ccc;
    font-weight: 800;
    font-size: 16px;
    background-image: url("../images/logo地图.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80% 80%;

    .dataTag {
      transform: translateY(40px);
    }
  }

  .dataBgLogo1 {
    left: 12px;
    bottom: 20px;
  }

  .dataBgLogo2 {
    left: 110px;
    bottom: 20px;
  }

  .dataBgLogo3 {
    left: 223px;
    bottom: 20px;
  }

  .dataBgLogo4 {
    left: 335px;
    bottom: 20px;
  }

  .dataBgLogo5 {
    left: 443px;
    bottom: 20px;
  }
}

.itemBg {
  display: flex;
  justify-content: space-between;
  order: 4;
  background-image: url("../images/底图.png");
  background-repeat: no-repeat;
  background-position: 50% 75%;
  background-size: 120% 120%;
}

.correctStyle {
  position: relative;
  order: 5;
  box-sizing: border-box;
  width: calc(calc(100% / 3) - 10px);
  height: 300px;
  margin: 5px;
  border: 1px dashed #ccc;
  .headerStyleShow {
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // width: 100%;
    // height: 50px;
    // color: #fff;
    // font-weight: 900;
    // font-size: 25px;
    border-bottom: 1px dashed #fff;
  }
  .footerStyleShow {
    display: flex;
    align-items: center;
    color: #fff;
    .correctStyle_left {
      box-sizing: border-box;
      width: 50%;
      height: 248px;
      padding-top: 10px;
      border-right: 1px dashed #fff;
      padding-left: 10px;
      .ant-table-row {
        color: white;
        background-color: #031032;
        .ant-table-cell,
        .ant-table-cell-row-hover {
          background-color: transparent;
        }
      }
      h1 {
        font-size: 18px;
        color: #fff;
      }
      .ant-checkbox-group-item {
        color: #ccc;
      }
      .check_box {
        float: left;
        width: 50%;
      }
      .unCheck_box {
        float: right;
        width: 50%;
      }
    }
    .correctStyle_right {
      box-sizing: border-box;
      width: 50%;
      height: 248px;
      padding-top: 10px;
      border-right: 1px dashed #fff;
      padding-left: 10px;
      h1 {
        font-size: 18px;
        color: #fff;
      }
      .ant-table-row {
        color: white;
        background-color: #031032;
        .ant-table-cell,
        .ant-table-cell-row-hover {
          background-color: transparent;
        }
      }
    }
  }
}

.headerBanner {
  color: #fff;

  .bannerHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: 900;
    height: 60px;
  }

  .bannerBodyStyle {
    display: flex;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    justify-content: space-evenly;
    transform: translateY(-7px);
    .GPUUseStyle {
      display: flex;
      width: 45%;
      .progressStyle {
        width: 100px;
      }
    }

    span,
    img {
      vertical-align: top;
      margin-right: 10px;
    }

    // .bannerBodyStyleSpan {
    //   width: 33%;
    // }
  }
}

.bodyShowStyle {
  color: #fff;
  border-top: 1px dashed #ccc;
  display: flex;
  justify-content: space-between;
  height: 210px;
  padding: 5px;
  .leftBodyShowStyle {
    border-right: 1px dashed #ccc;
    width: 50%;
    .version {
      font-size: 14px;
    }
    .charts {
      height: 130px;
    }
    .leftBodyShowStyleFirst {
      font-size: 18px;
      display: flex;
      align-items: center;
      margin: 5px 0 0 5px;
      img {
        padding-right: 15px;
      }
    }
    .correctStyle_left {
      box-sizing: border-box;
      width: 100%;
      height: 248px;
      padding-top: 10px;
      padding-left: 10px;
      .ant-table-row {
        line-height: 0;
        color: white;
        background-color: #031032;
        .ant-table-cell,
        .ant-table-cell-row-hover {
          background-color: transparent;
        }
      }
      h1 {
        font-size: 18px;
        color: #fff;
      }
      .ant-checkbox-group-item {
        color: #ccc;
      }
      .check_box {
        float: left;
        width: 50%;
      }
      .unCheck_box {
        float: right;
        width: 50%;
      }
    }
    .version {
      margin-left: 5px;
    }
  }

  .rightBodyShowStyle {
    width: 50%;

    .rightBodyShowStyleFirst {
      font-size: 18px;
      display: flex;
      align-items: center;
      margin: 5px 0 0 5px;

      img {
        padding-right: 15px;
      }
    }

    .rightBodyShowStyleCenter {
      display: flex;
      align-items: center;
      justify-content: start;
      margin-left: 10px;
      height: 140px;
      font-size: 15px;
      font-weight: 600;
    }
    .correctStyle_right {
      box-sizing: border-box;
      width: 100%;
      height: 248px;
      padding-top: 10px;
      padding-left: 10px;
      h1 {
        font-size: 18px;
        color: #fff;
      }
      .ant-table-row {
        color: white;
        background-color: #031032;
        .ant-table-cell,
        .ant-table-cell-row-hover {
          background-color: transparent;
        }
      }
    }
  }
}

.progressStyle {
  color: red !important;
  position: relative;

  .ant-progress-text {
    position: absolute;
    left: 5px;
    top: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #000;
  }

  .ant-progress-outer {
    padding: 0.06rem 0.1rem;
    border-radius: 0 !important;
    width: 100% !important;

    .ant-progress-bg {
      border-radius: 0 !important;
      height: 20px !important;
    }

    .ant-progress-success-bg,
    .ant-progress-bg {
      background-color: #04cfe4;
    }

    .ant-progress-inner {
      background-color: #4e6a96;
      border-radius: 0 !important;
    }
  }
}
